<template>
  <m-header />
  <m-tab />
  <player />
  <router-view :style="viewStyle" />
</template>
<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'
import MHeader from '@/components/header/header.vue'
import MTab from '@/components/tab/tab.vue'
import player from '@/components/player/player.vue'

const store = useStore()
const playlist = computed(() => store.state.playlist)
const viewStyle = computed(() => {
  const bottom = playlist.value.length > 0 ? '60px' : '0'
  return { bottom }
})
</script>
